<template>
  <HeadContainer
    class="conversation bg-background"
    :title="nickname"
    :title-icon="`vip${tier}`"
    disable-tail-gap
    :show-translate="supportTranslate"
    :show-premium="isVip"
    @back="back"
    @translate="toggleTranslator"
  >
    <Room :userId="userId" @click:media="onMediaClicked" @click:creator="(v) => emits('click:creator', v)"></Room>
    <ExpanalViewer v-model="isExpanalViewerOpen" :prev-bounds="prevBounds">
      <template #default>
        <div class="w-full h-full">
          <Feed :item="viewerData" :active="isExpanalViewerOpen" @click:lock="onFeedLockClicked"></Feed>
        </div>
      </template>
    </ExpanalViewer>
  </HeadContainer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useChatStore } from '@/store/chat'
import asyncCompWithLoading from '@/utils/async-comp-with-loading'
import ExpanalViewer from '@/components/common/ExpanalViewer.vue'
import Feed from '@/components/common/Feed.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'

const props = defineProps({
  userId: { type: Number },
})

const emits = defineEmits(['back', 'click:product', 'click:creator'])

const chatStore = useChatStore()
const { supportTranslate } = storeToRefs(chatStore)
const { getUser, toggleTranslator, $chatBuy } = chatStore

const currProduct = ref(null)
const viewerData = ref(null)
const prevBounds = { x: 0, y: 0, sx: 0.2, sy: 0.2 }
const isExpanalViewerOpen = ref(false)

function openExpanelViewer({ item, index }) {
  const currMedia = item.media_list[index]
  viewerData.value = currMedia
  currProduct.value = item
  isExpanalViewerOpen.value = true
}

function emitClickProduct({ item, index }) {
  console.log('emitClickProduct', item.media_list[index])
  emits('click:product', item.media_list[index].id)
}

const { isDesktop, isMobile } = storeToRefs(useAppStore())

function onMediaClicked({ item, index }) {
  isMobile.value && openExpanelViewer({ item, index })
  isDesktop.value && emitClickProduct({ item, index })
}

function onFeedLockClicked() {
  $chatBuy(currProduct.value)
}

const Room = asyncCompWithLoading(() => import('@/components/chat/Room.vue'))

const loading = ref(true)
const nickname = ref('')
const isVip = ref(false)
const tier = ref(1)
watch(
  () => props.userId,
  async (userId, prevUserId, onCleanup) => {
    if (!userId) {
      loading.value = true
      nickname.value = ''
      return
    }

    let cleanup = false
    onCleanup(() => (cleanup = true))

    // 載入開始
    loading.value = true

    nickname.value = ''
    isVip.value = false

    try {
      const newUser = await getUser(userId)

      if (cleanup) return
      console.log('newUser', newUser)

      nickname.value = newUser.nickname
      isVip.value = newUser.isVip
      tier.value = newUser.tier
    } catch (e) {
      console.warn(e)
    }

    loading.value = false
  },
  { immediate: true },
)

function back() {
  emits('back')
}
</script>
